<template>
    <div class="nav">
        <Router-Link :to="{ path: item.path }" v-for="item in nav" :key="item.title" class="nav-item">
            <img :src="item.active ? item.imgActive : item.img" alt="">
            <p>{{ item.title }}</p>
        </Router-Link>
    </div>
</template>

<script setup lang="ts">
import { RouterLink } from "vue-router"
const nav = [
    {
        title: '智能检测',
        img: '/src/assets/智能检测.jpg',
        imgActive: '/src/assets/智能检测-active.jpg',
        active: false,
        path: '/'
    },
    {
        title: '就业态势',
        img: '/src/assets/就业态势.jpg',
        imgActive: '/src/assets/就业态势-active.jpg',
        active: false,
        path: '/employment'
    },
    {
        title: '安防管理',
        img: '/src/assets/安防管理.jpg',
        imgActive: '/src/assets/安防管理-active.jpg',
        active: false,
        path: '/safemanage'
    },
    {
        title: '设备运维',
        img: '/src/assets/设备运维.jpg',
        imgActive: '/src/assets/设备运维-active.jpg',
        active: true,
        path: '/equipment'
    }
]
</script>

<style lang="scss" scoped>
.nav {
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    background-image: url(../../assets/菜单栏.png);
    background-repeat: no-repeat;
    height: 64px;
    background-size: 100% 100%;

    .nav-item {
        color: #fff;
        text-decoration: none;
        text-align: center;
        font-size: 14px;
        margin: 0 2px;

        img {
            width: 40px;
            height: 40px;
        }

        p {
            padding: 0;
            margin: 0;
        }
    }
}
</style>